<%@page import="com.sinodata.bsm.common.vo.RealTimeViewConf"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page import="java.util.List"%>
<%@page import="com.sinodata.bsm.center.util.spring.SpringContextHolder"%>
<%@page import="com.sinodata.bsm.center.service.resource.ResService"%>
<%@page import="com.sinodata.bsm.common.vo.Res"%>
<%@page import="net.sf.json.JSONArray"%>
<%@page import="net.sf.json.JSONObject"%>

<%
	request.setAttribute("flashPath",  request.getContextPath()+"/resources/flash");
	JSONArray arry = (JSONArray)request.getAttribute("resTypes");
	String fristResTypeId = null;
 if(arry.size()>0){
     JSONObject object=(JSONObject)arry.get(0);
     fristResTypeId = object.get("resTypeId").toString().trim();
 }
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="overflow:hidden;">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>TopoTooltips定制</title>
        <%@ include file="../include/common.jsp"%>
        <!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens -->
        <!-- BEGIN Browser History required section -->
        <link rel="stylesheet" type="text/css" href="${flashPath}/history/history.css" />
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/default/bsm/perf/real-time-view-custom.css" />
        <link rel="stylesheet" media="all" type="text/css" href="${pageContext.request.contextPath}/style/default/tree/zTreeStyle.css" />
        <link type="text/css" href="${pageContext.request.contextPath}/style/default/jqueryui/smoothness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
        <script type="text/javascript" src="${flashPath}/history/history.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/tree/jquery.ztree.all-3.1.min.js"></script>
        <script src="${pageContext.request.contextPath}/js/jquery/ui/jquery.ui.core.js"></script>
		<script src="${pageContext.request.contextPath}/js/jquery/ui/jquery.ui.widget.js"></script>
		<script src="${pageContext.request.contextPath}/js/jquery/ui/jquery.ui.mouse.js"></script>
		<script src="${pageContext.request.contextPath}/js/jquery/ui/jquery.ui.selectable.js"></script>
        
        <!-- END Browser History required section -->  
        <script type="text/javascript" src="${flashPath}/swfobject.js"></script>
        <script type="text/javascript">
            // For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. 
            var swfVersionStr = "0.0.0";
            // To use express install, set to playerProductInstall.swf, otherwise the empty string. 
            var xiSwfUrlStr = "${flashPath}/playerProductInstall.swf";
            var flashvars = {};
     		flashvars.flashPath="${flashPath}";
     		flashvars.reqPath="${pageContext.request.contextPath}"
     		flashvars.resTypeId = "<%= fristResTypeId%>";
            var params = {};
            params.quality = "high";
            params.bgcolor = "#ffffff";
            params.allowscriptaccess = "sameDomain";
            params.allowfullscreen = "true";
            params.wmode = "transparent";
            var attributes = {};
            attributes.id = "RealTimeCustom";
            attributes.name = "RealTimeCustom";
            attributes.align = "middle";
            swfobject.embedSWF(
                "${flashPath}/TooltipCustom.swf", "flashContent", 
                "100%", "100%", 
                swfVersionStr, xiSwfUrlStr, 
                flashvars, params, attributes);
            // JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
         //   swfobject.createCSS("#flashContent", "display:block;text-align:left;");
        </script>
        <script type="text/javascript">
				function changeRes(resId,resTypeId){
					RealTimeCustom.displayRes(resId,resTypeId);
				}

				function isChanged(){
					var ret = RealTimeCustom.isChanged();  
					return  ret;
				}

				function changeBtn(){
					/**/
					var resId = $("#resText").val();
					var resType = $("#typeText").val();
					alert("changeRes("+resId+","+resType+")");
					changeRes(resId,resType);
				}

				function showMenu() {
					if($("#menuContent").is(':hidden')){ //如果是隐藏
						$("#div1").attr("class","minus");
						 $("#menuContent").show();
						 var cityObj = $("#leftDiv");
							var cityOffset = $("#leftDiv").offset();
							$("#menuContent").css({
								left : cityOffset.left + "px",
								top : cityOffset.top + "px"
							}).slideDown("fast");
							$("body").bind("mousedown", onBodyDown);
			    	 }else{
			    		 hideMenu();
			     	}
				}
				
				function hideMenu(){
					 $("#div1").attr("class","add");
					 $("#menuContent").hide();
				}
				
				function onBodyDown(event) {
					if (!(event.target.id == "div1" || event.target.id == "resTypeId"
							|| event.target.id == "menuContent" || $(event.target).parents(
							"#menuContent").length > 0)) {
						hideMenu();
					}
				}
				
				function onClick(e, treeId, treeNode) {
					var zTree = $.fn.zTree.getZTreeObj("resTypeTree"), nodes = zTree
							.getSelectedNodes(), v = "";
					if (nodes.length != 1) {
						return;
					}
					if (nodes[0].isParent) {
						zTree.expandNode(nodes[0]);
						return;
					}
					var resTypeId = nodes[0].id;
					selfFound = nodes[0].selfFound;
					
					var liList = $("#selectable li");
					var isExited = false;
					$.each(liList, function(index, obj) {
						if ($(obj).find("span").text() == resTypeId) {
							isExited = true;
							return false;
						}
					});
					hideMenu();
					if (!isExited) {
						$("#selectable").append(
								"<li class='ui-widget-content ui-selectee'>"
										+ nodes[0].name + "<span style='display: none;'>"
										+ nodes[0].id + "</span></li>");
					}
				}

				function scroll_down(){
					$("#selectable").animate({"top": "-=50px"}, "fast");
				}

				function scroll_up(){
					if($("#selectable").css('top')>'-50px'){
						$("#selectable").css('top','0px');
					}else{
						$("#selectable").animate({"top": "+=50px"}, "fast");
					}
				}

				
				var setting = {
						async: {
							enable: true,
							url:"../resource/res-type!typeTree.action",
							dataType: "text",
							autoParam:["id"]
						},
						callback: {
							onClick: onClick
						},
						view: {
							dblClickExpand: false,
							showLine: false
						}
					};

				$(document).ready(function(){
					$.fn.zTree.init($("#resTypeTree"),setting);
					$("#selectable").selectable();
					$("#selectable").bind( "selectableselected", function(event, ui) {
						if(isChanged()){
							$(ui.selected).removeClass('ui-selected');
							event.stopPropagation(); 
							return false;
						}
						var resTypeId =$(ui.selected).children().first().text();
						changeRes(null,resTypeId);
					});

					$("#selectable").bind( "selectableunselected", function(event, ui) {
						if(isChanged()){
							getTopWin(window).getMessageBox().tip("请先保存或取消", '性能图已修改');
							$(ui.unselected).addClass('ui-selected');
							event.stopPropagation(); 
							return false;						
						}
					});
				});
							
        </script>
    </head>
    <body class="over-h">
	  <div style="width: 100%; height:100%">
	    	<div style="width:15%;vertical-align: top; height:100%; float:left">
	            <div id="leftDiv" class="visitor_cp">
		        	<div class="mod_t_play">
		        	  <h2 class="title-h2"> 
		        	  	<span>Tooltips定义</span>
		        		  <div id="div1" class="add" onclick="showMenu();"></div>
		        	  </h2>
		        	</div>
				<div style="height: 100%;overflow: hidden;">
		        	<ul id="selectable">
		        	   <%
		        	   	 
		        	   	 for(int i=0;arry!=null&&i<arry.size();i++){
		        	   	 	JSONObject confi = (JSONObject)arry.get(i);
		        	   	%>
		        	   	<li class="ui-widget-content ui-selectee <% if(i==0){out.println("ui-selected");} %>"><%=confi.getString("resTypeName") %><span style="display: none;"><%=confi.getLong("resTypeId") %></span></li>
		        	   	<%
		        	   	 }
		        	    %>
		        	</ul>
		        </div>
		        </div>
	    	</div>
	    	<div style="height:100%; width:85%; float:left;">
		        <div id="flashContent" class="flashContent">
		            <p>
		                To view this page ensure that Adobe Flash Player version 
		                11.3.0 or greater is installed. 
		            </p>
		        
		            <script type="text/javascript"> 
		                var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://"); 
		                document.write("<a href='http://www.adobe.com/go/getflashplayer'>Get Adobe Flash player</a>" ); 
		            </script> 
		            
		        </div>  
	    	</div>
	    </div>
	    <div id="menuContent" class="menuContent" style="display: none; position: absolute;">
			 <ul id="resTypeTree" class="ztree" style="margin-top: 20px; padding-left: 0; width: 200px; height: 520px;"></ul>
		</div>
   </body>
</html>